<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Hefei Jide'er Reproductive Health Hospital</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<style>
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }
        .icon-bg-blue {
            background-color: #E6F4FF;
        }
    </style>
<style>
    body {
      min-height: max(884px, 100dvh);
    }
  </style>
  </head>
<body class="bg-gray-50">
<div class="max-w-sm mx-auto bg-white">
<header class="p-4 flex justify-between items-center bg-white shadow-sm">
<div class="flex items-center space-x-2">
<span class="material-icons text-blue-500">arrow_back_ios</span>
<h1 class="text-lg font-semibold">合肥喜得儿生殖...</h1>
</div>
<div class="flex items-center space-x-2">
<button class="p-2 rounded-full">
<span class="material-icons">more_horiz</span>
</button>
<button class="p-2 rounded-full bg-black text-white">
<span class="material-icons">headphones</span>
</button>
</div>
</header>
<main class="p-4">
<div class="relative rounded-lg overflow-hidden mb-4">
<img alt="Hefei Jide'er Reproductive Health Hospital building" class="w-full h-auto" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZOSZAuOdrdXT7tqf7WR73OH5nhdGjIFmjE8TkYak0B7-arN9nE3eDVQSJMg_e2u8P45YtT60Ak5VJVKsu4Ywr5dLSxBvKq-lpOTOH91xmGh_OCc6m1ObBvQSpOQhF8o5FmzXVDuuSuxqmA-mbmrncOhNQBhPwXjlgQ5Ym9G-178q4p40nzAZ-LIEbieLkVJ6zv0bZvLIoz_jOap9DmKXNNOVNL0rqsg3xiBBRtu4F8L11RWGjEhlgbVNqs4DV-6BbV_FmtSP9FOQP"/>
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/50 to-transparent">
<h2 class="text-white text-lg font-bold">合肥喜得儿生殖健康医院</h2>
</div>
</div>
<div class="grid grid-cols-4 gap-4 text-center mb-6">
<div class="flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
<span class="material-icons text-blue-500 text-3xl">add_box</span>
</div>
<p class="text-sm mt-2 font-semibold">预约挂号</p>
<p class="text-xs text-gray-500">快速便捷</p>
</div>
<div class="flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
<span class="material-icons text-blue-500 text-3xl">chat_bubble_outline</span>
</div>
<p class="text-sm mt-2 font-semibold">在线咨询</p>
<p class="text-xs text-gray-500">一对一咨询</p>
</div>
<div class="flex flex-col items-center">
<div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg relative">
<span class="material-icons text-yellow-500 text-4xl">person</span>
<span class="material-icons absolute top-0 right-0 text-yellow-500 text-sm">add_circle</span>
</div>
<p class="text-sm mt-2 font-semibold">医生团队</p>
<p class="text-xs text-gray-500">医生预约</p>
</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm mb-6">
<div class="grid grid-cols-4 gap-y-4 text-center">
<div class="flex flex-col items-center">
<span class="material-icons text-blue-500 text-3xl">sentiment_very_dissatisfied</span>
<p class="text-xs mt-1">不孕不育</p>
</div>
<div class="flex flex-col items-center">
<span class="material-icons text-pink-400 text-3xl">filter_vintage</span>
<p class="text-xs mt-1">排卵障碍</p>
</div>
<div class="flex flex-col items-center">
<span class="material-icons text-green-500 text-3xl">medication</span>
<p class="text-xs mt-1">阳痿早泄</p>
</div>
<div class="flex flex-col items-center">
<span class="material-icons text-red-500 text-3xl">visibility</span>
<p class="text-xs mt-1">性功能障碍</p>
</div>
<div class="flex flex-col items-center">
<span class="material-icons text-yellow-500 text-3xl">bug_report</span>
<p class="text-xs mt-1">生殖感染</p>
</div>
<div class="flex flex-col items-center">
<span class="material-icons text-purple-500 text-3xl">opacity</span>
<p class="text-xs mt-1">泌尿感染</p>
</div>
<div class="flex flex-col items-center">
<span class="material-icons text-blue-500 text-3xl">healing</span>
<p class="text-xs mt-1">包皮包茎</p>
</div>
<div class="flex flex-col items-center">
<span class="material-icons text-indigo-500 text-3xl">bubble_chart</span>
<p class="text-xs mt-1">前列腺增生</p>
</div>
</div>
</div>
<div class="mb-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold">医生推荐</h3>
<a class="text-sm text-gray-500" href="#">更多</a>
</div>
<div class="space-y-4">
<div class="flex items-center space-x-4">
<img alt="Doctor Zhan Aihua" class="w-16 h-16 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDflRp4nTTmMLCEqELSOCPL6b3lE_vWgXrtl9D4N1YgtRBNHFG_8MPTHR6BehH3RspFozwojCXNGqP7E3EeWEjGL3MnbU2RBpylKE6MzSqfd9NppbD41o00TMKaOIOx-C40n_fcHeSwLBioHqYXkm5KP9l1hPzsarAc7btXdYwEvGKgqCupap5VAYXGHK5RFVeXnqd4wPjPf6_gp7mlbWhpD1JkTWBnXz271ZS9gEEmwvRN8qgHvO5Hdw6XgHw8TIUJWPFV0M3WFVbw"/>
<div class="flex-1">
<div class="flex justify-between items-start">
<div>
<p class="font-semibold">展爱华 <span class="text-sm text-blue-500 font-normal">主任医师</span></p>
<p class="text-xs text-gray-500">中华医学会妇产科学会委员/...</p>
</div>
<button class="px-4 py-1 text-sm text-blue-500 border border-blue-500 rounded-full">挂号</button>
</div>
<p class="text-xs text-gray-500 mt-1">擅长：妇科炎症、妇科内分泌疾病、多囊卵巢综合征、输...</p>
</div>
</div>
<div class="flex items-center space-x-4">
<img alt="Doctor芮松" class="w-16 h-16 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBJZjpqz8MId93dWtrdzlIamu7rCyedpk2AT6ZhnRahlNlfYO0bHdR2vdJ-_oEGmvqA_bmlFlimzlfW_Ijo-pz1KpW7OiznAFpjvYhR9swShZE-qFQ7L_5KBL3opAjj5cqnZpzOtVQkVOE2XJSbIeZIOYDyd9N1X5tZQqy8aPt4VgunpDuO43YSZxGNn1a4Z1tLi0qmcwFYGKwjCSSpJY-YT0M_nHEI32JervmvJBvh67WgO1YkZzdQVIodfMdwyv-_k03nnp3H1BY-"/>
<div class="flex-1">
<div class="flex justify-between items-start">
<div>
<p class="font-semibold">芮松 <span class="text-sm text-blue-500 font-normal">中医主治医师</span></p>
</div>
<button class="px-4 py-1 text-sm text-blue-500 border border-blue-500 rounded-full">挂号</button>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="fixed bottom-0 left-0 right-0 max-w-sm mx-auto bg-white border-t flex justify-around py-2">
<div class="text-center text-blue-500">
<span class="material-icons">home</span>
<p class="text-xs">首页</p>
</div>
<div class="text-center text-gray-400">
<span class="material-icons">date_range</span>
<p class="text-xs">预约挂号</p>
</div>
<div class="text-center text-gray-400">
<span class="material-icons">groups</span>
<p class="text-xs">医生团队</p>
</div>
<div class="text-center text-gray-400">
<span class="material-icons">person_outline</span>
<p class="text-xs">我的</p>
</div>
</footer>
</div>

</body></html>